import React, { useRef, useEffect } from 'react'
import * as echarts from 'echarts'
import {
    Select,
    Radio,
    DatePicker,
    DatePickerProps,
    Table,
    Button,
    Dropdown,
    Menu,
    message
} from 'antd'
// import type { TableColumnsType, TableProps } from "antd";

interface DataType {
    key: React.Key
    // 客单价区间
    priceRange: string
    // 订单数量
    orderNum: number
    // 订单占比
    orderZhanbi: string
    // 美团订单数量
    meituanNum: number
    // 美团订单占比
    meituanZhanbi: string
    // 饿了么订单数量
    elemeNum: number
    // 饿了么订单占比
    elemeZhanbi: string
    // 实收金额
    totalPrice: number
}

const columns = [
    // 客单价区间
    {
        title: '客单价区间',
        dataIndex: 'priceRange',
        key: 'priceRange'
    },
    // 订单数量
    {
        title: '订单数量',
        dataIndex: 'orderNum',
        key: 'orderNum'
    },
    // 订单占比
    {
        title: '订单占比',
        dataIndex: 'orderZhanbi',
        key: 'orderZhanbi'
    },
    // 美团订单数量
    {
        title: '美团订单数量',
        dataIndex: 'meituanNum',
        key: 'meituanNum'
    },
    // 美团订单占比
    {
        title: '美团订单占比',
        dataIndex: 'meituanZhanbi',
        key: 'meituanZhanbi'
    },
    // 饿了么订单数量
    {
        title: '饿了么订单数量',
        dataIndex: 'elemeNum',
        key: 'elemeNum'
    },
    // 饿了么订单占比
    {
        title: '饿了么订单占比',
        dataIndex: 'elemeZhanbi',
        key: 'elemeZhanbi'
    },
    // 实收金额
    {
        title: '实收金额',
        dataIndex: 'totalPrice',
        key: 'totalPrice'
    }
]
const data: DataType[] = [
    {
        key: '1',
        // 客单价区间
        priceRange: '100+',
        // 订单数量
        orderNum: 145,
        // 订单占比
        orderZhanbi: '70%',
        // 美团订单数量
        meituanNum: 34,
        // 美团订单占比
        meituanZhanbi: '30%',
        // 饿了么订单数量
        elemeNum: 145,
        // 饿了么订单占比
        elemeZhanbi: '70%',
        // 实收金额
        totalPrice: 3627
    },
    {
        key: '2',
        // 客单价区间
        priceRange: '91-100',
        // 订单数量
        orderNum: 312,
        // 订单占比
        orderZhanbi: '7%',
        // 美团订单数量
        meituanNum: 39,
        // 美团订单占比
        meituanZhanbi: '20%',
        // 饿了么订单数量
        elemeNum: 5,
        // 饿了么订单占比
        elemeZhanbi: '7%',
        // 实收金额
        totalPrice: 3627.0
    },
    {
        key: '3',
        // 客单价区间
        priceRange: '81-90',
        // 订单数量
        orderNum: 145,
        // 订单占比
        orderZhanbi: '70%',
        // 美团订单数量
        meituanNum: 34,
        // 美团订单占比
        meituanZhanbi: '30%',
        // 饿了么订单数量
        elemeNum: 145,
        // 饿了么订单占比
        elemeZhanbi: '70%',
        // 实收金额
        totalPrice: 3627
    }
]
export default function Keorder() {
    // 导出数据的方法
    const exportData = (option: string) => {
        message.info(`Exporting data with option: ${option}`)
        // 实现具体的导出逻辑
    }

    const menu = (
        <Menu>
            <Menu.Item key="1" onClick={() => exportData('current-page')}>
                导出本页
            </Menu.Item>
            <Menu.Item key="2" onClick={() => exportData('filtered')}>
                导出筛选
            </Menu.Item>
            <Menu.Item key="3" onClick={() => exportData('all')}>
                导出全部
            </Menu.Item>
        </Menu>
    )
    const handleChange = (value: string) => {
        console.log(`selected ${value}`)
    }
    const onChange: DatePickerProps['onChange'] = (date, dateString) => {
        console.log(date, dateString)
    }
    let box = useRef(null)
    useEffect(() => {
        let myChart = echarts.init(box.current)
        myChart.setOption(option)
    })

    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['美团', '饿了么', '其他平台']
            }
        ],
        yAxis: [
            {
                type: 'value',
                data: [
                    '10 - 90',
                    '100 - 500',
                    '500 - 1000',
                    '1000 - 2000',
                    '2000 - 5000',
                    '5000 - 10000',
                    '10000以上'
                ]
            }
        ],
        series: [
            {
                name: '美团',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                    focus: 'series'
                },
                data: [300, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '饿了么',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                    focus: 'series'
                },
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: '其他平台',
                type: 'bar',
                stack: 'Ad',
                barWidth: 90,
                emphasis: {
                    focus: 'series'
                },
                data: [150, 232, 201, 154, 190, 330, 410]
            }
        ]
    }
    return (
        <div className="relative">
            {/* 头部   */}
            <div className="w-[90%] absolute h-15 m-auto left-20 top-5 ml-10 text-center  bg-white  rounded shadow-sm">
                <Select
                    className="w-35 h-10 ml-3 mt-3 "
                    defaultValue="所有品牌"
                    onChange={handleChange}
                    options={[
                        { value: '所有品牌', label: '所有品牌' },
                        { value: 'KFC', label: 'KFC' },
                        { value: '麦当劳', label: '麦当劳' }
                    ]}
                />
                {/* 分区 */}
                <Select
                    className="w-35 h-10 ml-3 "
                    defaultValue="默认分区"
                    onChange={handleChange}
                    options={[
                        { value: '默认分区', label: '默认分区' },
                        { value: 'A区', label: 'A区' },
                        { value: 'B区', label: 'B区' }
                    ]}
                />
                {/* 店铺 */}
                <Select
                    className="w-45 h-10 ml-5"
                    defaultValue="全部店铺"
                    onChange={handleChange}
                    options={[
                        { value: '全部店铺', label: '全部店铺' },
                        { value: '肯德基总店', label: '肯德基总店' },
                        { value: '麦当劳总店', label: '麦当劳总店' },
                        { value: '肯德基分店', label: '肯德基分店' }
                    ]}
                />
                {/* 来源 */}
                <Select
                    className="w-40 h-10 ml-5"
                    defaultValue="全部来源"
                    onChange={handleChange}
                    options={[
                        { value: '全部来源', label: '全部来源' },
                        { value: '美团', label: '美团' },
                        { value: '饿了么', label: '饿了么' }
                    ]}
                />

                <button className="w-18 h-9 ml-5 bg-blue-500 text-white rounded hover:bg-blue-600 border-none">
                    筛选
                </button>
            </div>
            {/* 客单分析 */}
            <div className="w-[90%] absolute  h-65 m-auto ml-30 top-25  bg-white  rounded shadow-sm">
                <p
                    style={{
                        display: 'inline-block',
                        fontSize: '15px',
                        fontWeight: 'bold',
                        paddingLeft: '10px'
                    }}
                >
                    客单价分析
                </p>
                <div className="float-right mr-5 mt-1">
                    <Radio.Group
                        className="w-60 h-8  "
                        // size="large"
                        defaultValue="a"
                        buttonStyle="solid"
                    >
                        <Radio.Button value="a">今日</Radio.Button>
                        <Radio.Button value="b">近7日</Radio.Button>
                        <Radio.Button value="c">近30日</Radio.Button>
                    </Radio.Group>
                    <DatePicker onChange={onChange} className="w-60 h-10" />
                </div>
                <hr />
                <div className="flex flex-wrap  p-4  ">
                    <div className="w-100 h-50 text-align-center m-auto flex flex-wrap gap-2 p-4 ">
                        <div style={{ marginLeft: '50px' }}>
                            <p>平均客单价</p>
                            <p className="font-800 text-2xl color-blue-400">
                                59.23
                            </p>
                        </div>
                        <div
                            style={{
                                borderRight: '1px solid #dfdfdf',
                                width: '1px',
                                height: '100px',
                                marginLeft: '50px'
                            }}
                        ></div>
                        <div style={{ marginLeft: '50px' }}>
                            <p>美团平均客单价</p>
                            <p className=" font-700 text-base color-blue-400">
                                16.12
                            </p>
                            <p>饿了么平均客单价</p>
                            <p className="font-700 text-base color-blue-400">
                                43.11
                            </p>
                        </div>
                    </div>
                    <div
                        style={{
                            borderRight: '1px solid red',
                            width: '1px',
                            height: '150px'
                        }}
                    ></div>
                    <div className="w-100 h-50 text-align-center m-auto flex flex-wrap gap-2 p-4 ">
                        <div style={{ marginLeft: '50px' }}>
                            <p>平均客单价</p>
                            <p className="font-800 text-2xl color-blue-400">
                                30.32
                            </p>
                        </div>
                        <div
                            style={{
                                borderRight: '1px solid #dfdfdf',
                                width: '1px',
                                height: '100px',
                                marginLeft: '50px'
                            }}
                        ></div>
                        <div style={{ marginLeft: '50px' }}>
                            <p>美团平均客单价</p>
                            <p className=" font-700 text-base color-blue-400">
                                15.25
                            </p>
                            <p>饿了么平均客单价</p>
                            <p className="font-700 text-base color-blue-400">
                                15.07
                            </p>
                        </div>
                    </div>
                    <div
                        style={{
                            borderRight: '1px solid #01aaed',
                            width: '1px',
                            height: '150px'
                        }}
                    ></div>
                    <div className="w-100 h-50 text-align-center m-auto flex flex-wrap gap-2 p-4 ">
                        <div style={{ marginLeft: '50px' }}>
                            <p>平均客单价</p>
                            <p className="font-800 text-2xl color-blue-400">
                                46.98
                            </p>
                        </div>
                        <div
                            style={{
                                borderRight: '1px solid #dfdfdf',
                                width: '1px',
                                height: '100px',
                                marginLeft: '50px'
                            }}
                        ></div>
                        <div style={{ marginLeft: '50px' }}>
                            <p>美团平均客单价</p>
                            <p className=" font-700 text-base color-blue-400">
                                36.25
                            </p>
                            <p>饿了么平均客单价</p>
                            <p className="font-700 text-base color-blue-400">
                                10.73
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div className="w-[90%] absolute  h-115 m-auto ml-30 top-105  bg-white  rounded shadow-sm">
                <p
                    style={{
                        fontSize: '15px',
                        fontWeight: 'bold',
                        paddingLeft: '15px'
                    }}
                >
                    客单价区间分布图
                </p>
                <hr />

                <div ref={box} className="w-300 h-100  m-auto "></div>
            </div>
            {/* 客单价区间分布明细表 */}
            <div className="w-[90%] absolute  h-140 m-auto ml-30 top-225  bg-white  rounded shadow-sm">
                <p
                    style={{
                        fontSize: '15px',
                        fontWeight: 'bold',
                        paddingLeft: '15px'
                    }}
                >
                    客单价区间分布明细表
                    <Dropdown overlay={menu} trigger={['click']}>
                        <Button
                            type="primary"
                            className="float-right mr-5 mt--2 "
                        >
                            导出数据
                            <span className="caret-down" />
                        </Button>
                    </Dropdown>
                </p>
                <hr />

                <div>
                    <Table
                        columns={columns}
                        dataSource={data}
                        rowKey={(record) => record.key}
                        pagination={{
                            pageSize: 5
                        }}
                    />
                </div>
            </div>
        </div>
    )
}
